import React, { useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { AntDesignOutlined } from "@ant-design/icons";
import { Avatar, Divider, Tooltip } from "antd";
import { NavLink, Outlet } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;
import "./home.css";
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem(<NavLink to="/User">博客列表</NavLink>, "1", <PieChartOutlined />),
  getItem(<NavLink to="/List">博客管理</NavLink>, "2", <DesktopOutlined />),
];

function Home() {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <div>
      <Layout
        style={{
          minHeight: "100vh",
        }}
      >
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout>
          <Header
            className="head"
            style={{ padding: 0, background: colorBgContainer }}
          >
            <Avatar
              className="header"
              src="https://api.dicebear.com/7.x/miniavs/svg?seed=1"
            />
            <span>GKing</span>
          </Header>
          <Content
            style={{
              margin: "0 16px",
            }}
          >
            <Breadcrumb
              style={{
                margin: "16px 0",
              }}
            >
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer
            style={{
              textAlign: "center",
            }}
          >
            屠魔的少年终将成魔 只留下最后的魔做了救世主
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Home;
